<template>
  <view class="verification-detail-container">
    <!-- 顶部导航栏 -->
    <view class="top-nav">
      <image 
        class="back-icon" 
        src="/static/image/arrow_right.png" 
        mode="aspectFit" 
        @click="navigateBack"
      />
      <text class="nav-title">核销详情</text>
      <view class="empty-box"></view>
    </view>

    <!-- 核销详情信息 -->
    <view class="detail-section" v-if="verificationDetail">
      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">核销信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">订单编号：</text>
            <text class="value">{{ verificationDetail.orderNumber }}</text>
          </view>
          <view class="info-row">
            <text class="label">核销状态：</text>
            <text class="value" :class="getVerificationStatusClass(verificationDetail.status)">
              {{ getVerificationStatusText(verificationDetail.status) }}
            </text>
          </view>
          <view class="info-row">
            <text class="label">核销时间：</text>
            <text class="value">{{ verificationDetail.verificationTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">核销人：</text>
            <text class="value">{{ verificationDetail.verifier }}</text>
          </view>
        </view>
      </view>

      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">订单详情</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">场馆名称：</text>
            <text class="value">{{ verificationDetail.courtName }}</text>
          </view>
          <view class="info-row">
            <text class="label">球桌类型：</text>
            <text class="value">{{ verificationDetail.courtType }}</text>
          </view>
          <view class="info-row">
            <text class="label">预订日期：</text>
            <text class="value">{{ verificationDetail.bookDate }}</text>
          </view>
          <view class="info-row">
            <text class="label">使用时间：</text>
            <text class="value">{{ verificationDetail.useTime }}</text>
          </view>
          <view class="info-row">
            <text class="label">使用人数：</text>
            <text class="value">{{ verificationDetail.peopleCount }}人</text>
          </view>
        </view>
      </view>

      <view class="detail-card">
        <view class="card-header">
          <text class="card-title">费用信息</text>
        </view>
        <view class="card-content">
          <view class="info-row">
            <text class="label">场地费用：</text>
            <text class="value">¥{{ verificationDetail.amount }}</text>
          </view>
          <view class="info-row total-row">
            <text class="label">实付金额：</text>
            <text class="value total-price">¥{{ verificationDetail.amount }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <image class="empty-icon" src="/static/image/table.png" mode="aspectFit"></image>
      <text class="empty-text">未找到核销详情</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 核销详情数据
const verificationDetail = ref(null)

// 模拟核销详情数据
const mockVerificationDetails = [
  {
    id: 1,
    orderNumber: 'TT20231201001',
    status: 'completed',
    verificationTime: '2023-12-01 15:30',
    verifier: '张管理员',
    amount: 80,
    courtName: '市体育馆乒乓球馆',
    courtType: '红双喜专业台桌',
    bookDate: '2023-12-15',
    useTime: '14:00-16:00',
    peopleCount: 2
  },
  {
    id: 2,
    orderNumber: 'TT20231202005',
    status: 'completed',
    verificationTime: '2023-12-02 18:45',
    verifier: '张管理员',
    amount: 120,
    courtName: '高校乒乓俱乐部',
    courtType: '双鱼训练台桌',
    bookDate: '2023-12-18',
    useTime: '19:00-21:00',
    peopleCount: 4
  },
  {
    id: 3,
    orderNumber: 'TT20231128012',
    status: 'completed',
    verificationTime: '2023-11-28 11:20',
    verifier: '张管理员',
    amount: 60,
    courtName: '社区活动中心',
    courtType: '标准竞赛台桌',
    bookDate: '2023-12-01',
    useTime: '10:00-12:00',
    peopleCount: 2
  }
]

// 获取核销状态样式类
const getVerificationStatusClass = (status) => {
  switch (status) {
    case 'completed': return 'status-completed'
    default: return ''
  }
}

// 获取核销状态文本
const getVerificationStatusText = (status) => {
  switch (status) {
    case 'completed': return '已完成'
    default: return '未知'
  }
}

// 页面加载时获取详情
const onLoad = (options) => {
  const recordId = Number(options.id)
  verificationDetail.value = mockVerificationDetails.find(item => item.id === recordId)
  
  if (!verificationDetail.value) {
    uni.showToast({
      title: '未找到核销详情',
      icon: 'none'
    })
  }
}

// 返回上一页
const navigateBack = () => {
  uni.navigateBack()
}

// 暴露onLoad方法给uni-app
defineExpose({
  onLoad
})
</script>

<style lang="scss">
$primary-color: #165dff;
$success-color: #07c160;
$gray-light: #f5f5f5;
$gray-middle: #999;
$gray-dark: #666;
$border-color: #f0f0f0;
$danger-color: #f5222d;

.verification-detail-container {
  min-height: 100vh;
  background-color: $gray-light;
  padding-bottom: 20px;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  background-color: #fff;
  border-bottom: 1px solid $border-color;

  .back-icon {
    width: 24px;
    height: 24px;
    transform: rotate(180deg);
    cursor: pointer;
  }

  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .empty-box {
    width: 24px;
  }
}

.detail-section {
  padding: 12px;

  .detail-card {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;

    .card-header {
      padding: 16px;
      border-bottom: 1px solid $border-color;

      .card-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }
    }

    .card-content {
      padding: 16px;

      .info-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-size: 14px;
          color: $gray-dark;
        }

        .value {
          font-size: 14px;
          color: #333;
          text-align: right;
          max-width: 60%;

          &.status-completed {
            color: $success-color;
          }
        }

        &.total-row {
          margin-top: 10px;
          padding-top: 10px;
          border-top: 1px dashed $border-color;

          .value.total-price {
            font-size: 16px;
            font-weight: 600;
            color: $danger-color;
          }
        }
      }
    }
  }
}

.empty-state {
  text-align: center;
  padding: 100px 0;

  .empty-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    opacity: 0.5;
  }

  .empty-text {
    font-size: 14px;
    color: $gray-middle;
  }
}
</style>